import React, { useState, useEffect } from "react";
import { useLocation } from 'react-router-dom';
import styles from "./detail.module.css";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { Button, Table } from 'antd';
import AntBtn from "../../../components/order/AntBtn";
import { AntDelBtnModal } from "../../../components/order/AntModal";

const Index = () => {
  let location = useLocation();
  let navigate = useNavigate();
  const id = location.state.id;

  let [basicInfo, setBasicInfo] = useState([]);
  let [receiveInfo, setReceiveInfo] = useState([]);
  let [ticketInfo, setTicketInfo] = useState([]);

  // 商品信息数据
  let [goodsData, setGoodsData] = useState([]);

  // 附件管理数据
  let [appendixData, setAppendixData] = useState([]);

  // 商品信息表格头
  const tableColumns = [
    {
      title: "商品名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "规格",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "数量",
      dataIndex: "count",
      key: "count",
    },
    {
      title: "单价",
      dataIndex: "price",
      key: "price",
    },
    {
      title: "优惠金额",
      dataIndex: "sellprice",
      key: "sellprice",
    },
    {
      title: "合计金额",
      dataIndex: "total",
      key: "total",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            <AntDelBtnModal id={record} fn={delData}></AntDelBtnModal>
          </>
        );
      },
    },
  ];

  // 附件管理表格头
  const tableColumns2 = [
    {
      title: "附件名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "上传时间",
      dataIndex: "uploadTime",
      key: "uploadTime",
    },
    {
      title: "附件格式",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "附件大小",
      dataIndex: "appendixCount",
      key: "appendixCount",
    },
    {
      title: "上传人员",
      dataIndex: "uploadPeople",
      key: "uploadPeople",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            <Button onClick={() => {
              axios({
                url: "http://127.0.0.1:4523/m1/1894961-0-default/order/detail/appendixdownload",
                params: {
                  appendixId: record.key,
                },
                method: "POST",
              })
                .then((res) => {
                  console.log(res.data.msg)
                })
                .catch((err) => console.error(err));
            }} size="small">下载</Button>
            <Button size="small" onClick={() => {
              axios({
                url: "http://127.0.0.1:4523/m1/1894961-0-default/order/detail/appendixdel",
                params: {
                  appendixId: record.key,
                },
                method: "POST",
              })
                .then((res) => {
                  setAppendixData(res.data.data)
                })
                .catch((err) => console.error(err));
            }}>删除</Button>
          </>
        );
      },
    },
  ];

  // 加载时请求数据
  useEffect(() => {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/detail",
      params: {
        OrderNum: id,
      },
      method: "POST",
    })
      .then((res) => {
        setBasicInfo(res.data.data[0]);
        setReceiveInfo(res.data.info[0]);
        setTicketInfo(res.data.receiptInfo[0]);
        setGoodsData(res.data.goodsInfo);
        setAppendixData(res.data.appendix);
      })
      .catch((err) => console.error(err));
  }, [id]);

  // 返回上一页
  const backPrePage = () => {
    navigate("/order/list");
  };

  // 删除
  const delData = (num) => {
    console.log(num)
    // 发送删除请求
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/order/detail/delgoods",
      params: {
        OrderNum: num,
      },
      method: "POST",
    })
      .then((res) => {
        setGoodsData(res.data.data);
      })
      .catch((err) => console.error(err));
  }

  // 请求
  // function tableDataReq() {
  //   console.log('表格数据获取成功')
  // }

  return (
    <>
      <div className={styles.PageTitle}>
        <div className={styles.PageTitle_left}>订单详情</div>
        <div className={styles.PageTitle_right}>
          <AntBtn BtnType="primary" fn={backPrePage}>
            返回
          </AntBtn>
        </div>
      </div>
      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 基础信息</span>
        </div>

        <div className={styles.info}>
          <span className={styles.infotitle}>订单编号</span>
          <span className={styles.infoitem}>{basicInfo.OrderNum}</span>
        </div>
        <div>
          <span className={styles.infotitle}>创建时间</span>
          <span className={styles.infoitem}>{basicInfo.OrderCreateTime}</span>
        </div>
        <div>
          <span className={styles.infotitle}>付款状态</span>
          <span className={styles.infoitem}>{basicInfo.OrderPayState}</span>
        </div>
        <div>
          <span className={styles.infotitle}>发货状态</span>
          <span className={styles.infoitem}>{basicInfo.OrderDeliverState}</span>
        </div>
        <div>
          <span className={styles.infotitle}>客户名称</span>
          <span className={styles.infoitem}>{basicInfo.OrderCustmerName}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 收货信息</span>
        </div>

        <div className={styles.info}>
          <span className={styles.infotitle}>收货人</span>
          <span className={styles.infoitem}>{receiveInfo.name}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货地址</span>
          <span className={styles.infoitem}>{receiveInfo.address}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货手机</span>
          <span className={styles.infoitem}>{receiveInfo.phone}</span>
        </div>
        <div>
          <span className={styles.infotitle}>收货电话</span>
          <span className={styles.infoitem}>{receiveInfo.tel}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 开票信息</span>
        </div>

        <div className={styles.info}>
          <span className={styles.infotitle}>是否开票</span>
          <span className={styles.infoitem}>{ticketInfo.need}</span>
        </div>
        <div>
          <span className={styles.infotitle}>发票类型</span>
          <span className={styles.infoitem}>{ticketInfo.type}</span>
        </div>
        <div>
          <span className={styles.infotitle}>税号</span>
          <span className={styles.infoitem}>{ticketInfo.taxnum}</span>
        </div>
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 商品信息</span>
        </div>
        <Table columns={tableColumns} dataSource={goodsData} />
      </div>

      <div className={styles.box}>
        <div>
          <span className={styles.line}>| </span>
          <span className={styles.title}> 附件管理</span>
        </div>
        <Table columns={tableColumns2} dataSource={appendixData} />
      </div>
    </>
  );
};

export default Index;
